<template>
	<div>
		<div class="content">
			<el-form ref="ruleFormRef" style="max-width: 600px" :model="data" label-width="auto"
				class="ruleForm-demo" status-icon :rules="rules">
				<h1 style="text-align: center;">登录</h1>
				<el-form-item label="账号" prop="loginName">
					<el-input v-model="data.loginName"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="loginPwd">
					<el-input v-model="data.loginPwd" type="password" show-password></el-input>
				</el-form-item>

				<el-form-item style="margin-top: 50px;">
					<el-button type="primary" @click="onlogin(ruleFormRef)" style="width: 48%;">
						登录
					</el-button>
					<el-button @click="resetForm(ruleFormRef)" style="width: 48%;">重置</el-button>

				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import {
	useRouter
} from 'vue-router'
import loginapi from "../api/loginapi"
import {
	useMainStore
} from '../store/index'
import {
	useUserStore
} from '../store/user'
import {
	ref,
	reactive

} from 'vue'
import { ElLoading, ElMessage ,FormInstance,FormRules} from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const userStore = useUserStore()
const router = useRouter();

interface RuleForm {
		loginName: string
		loginPwd: string
}
const data = ref<RuleForm>({
		loginName: '',
		loginPwd: ''
})
const rules = reactive<FormRules<RuleForm>>({
    loginName: [
        { required: true, message: '请输入账户', trigger: 'blur' },
    ],
	loginPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
})

const onlogin =async (formEl: FormInstance | undefined)  => {

	console.log(data);
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if(valid){
		const loadingInstance = ElLoading.service({
		text: "加载中...",
		background: "rgba(0,0,0,0.5)"
	})
	//router.push("user")
	loginapi.login(data.value).then(res => {
		sessionStorage.setItem("token", res.data.token);
		sessionStorage.setItem("ProfilePhoto", res.data.ProfilePhoto);
		sessionStorage.setItem("UserId", res.data.UserId);
		sessionStorage.setItem("UserName", res.data.UserName);
		userStore.user = { profilePhoto: res.data.Tx, userId: res.data.UserId, userName: res.data.UserName }

		loadingInstance.close()
		console.log("11111")
		router.push({ path: '/home' })
	}).catch(err => {
		console.log("err=>", err);
		setTimeout(() => {
			loadingInstance.close()
			ElMessage({
				message: '密码错误',
				grouping: true,
				type: 'error',
			})
		}, 1000);

	})
}
})
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style>
.content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100svh;
	margin-top: -9px;
	background-image: url(../assets/02.jpg);
	background-size: cover;
	/*保持图片比例并完全覆盖元素*/
	background-position: center center;
	/*将图片居中对齐*/

}

.ruleForm-demo {
	width: 300px;
	height: 330px;
	border: 1px solid #6403034d;
	border-radius: 10px;
	padding: 40px;
	background-color: rgba(255, 255, 255, 0.6);
	z-index: 999;
}

#a {
	margin-left: 70px;
}
h1{
	padding-bottom: 25px;
}
label{
	color: black;
	font-size: 20px;
}
</style>